Telegram Group & Telegram Channel
🎉 Tailwind CSS v4.1 — тени, маски и удобства для вёрстки

Tailwind обновился до версии 4.1. Формально — минорный апдейт, но на деле получил кучу полезных штук. Особенно для тех, кто много работает с UI и адаптивностью.

Вот что появилось:

Текстовые тени
Добавили text-shadow с 5 размерами (2xslg).
Поддерживаются цветные тени, например:
text-shadow-blue-500/50
📌 Удобно для заголовков и эффекта тиснения — белая полупрозрачная тень + тёмный текст.

🎭 CSS-маски
Новые утилиты mask-* для линейных, радиальных и конических градиентов.
Пример: mask-t-from-50% — плавное затемнение сверху.
Можно комбинировать несколько масок.

🧵 Новый контроль переноса
Появились:
- wrap-normal
- wrap-break-word
- wrap-anywhere

Особенно полезно в flex и grid, где раньше длинные строки могли ломать вёрстку.

🌈 Цветной drop-shadow
Теперь drop-shadow можно раскрашивать:
drop-shadow-xl drop-shadow-indigo-500/50
Работает как фильтр, создаёт мягкое цветное свечение.

📱 Указатели: coarse / fine
Появились префиксы pointer-coarse, pointer-fine и any-pointer-*.
Полезно для адаптации интерфейса под тач или мышку:
<button class="px-3 py-1 pointer-coarse:px-5 pointer-coarse:py-3">Кнопка</button>


🧮 Выравнивание по последней строке
items-baseline-last и self-baseline-last — выравнивают по последней строке текста.
Актуально для карточек, чатов и типографики.

🛟 Безопасное центрирование
justify-center-safe, items-center-safe — если контент не влезает, он смещается влево, а не обрезается.

💻 Поддержка старых браузеров
Работает корректно на Safari 15 и старом Firefox:
- fallback для OKLCH
- отключение @property, если не поддерживается
- корректная деградация теней и градиентов

🧾 @source inline — для safelist в CSS
Можно подключать классы прямо в CSS:
@source inline("text-red-500 lg:bg-blue-100");


🔄 Другие полезности
- noscript: — для стилей без JS
- user-valid: и user-invalid: — UX-дружественная валидация
- details-content: — для <details>
- inverted-colors: — для системной инверсии

🧩 Вывод
Tailwind 4.1 — не про революцию, а про удобные детали, которые приятно использовать.
Обновляться можно без страха — всё совместимо

CutCode
🔥113



tg-me.com/laravel_cutcode/722
Create:
Last Update:

🎉 Tailwind CSS v4.1 — тени, маски и удобства для вёрстки

Tailwind обновился до версии 4.1. Формально — минорный апдейт, но на деле получил кучу полезных штук. Особенно для тех, кто много работает с UI и адаптивностью.

Вот что появилось:

Текстовые тени
Добавили text-shadow с 5 размерами (2xslg).
Поддерживаются цветные тени, например:
text-shadow-blue-500/50
📌 Удобно для заголовков и эффекта тиснения — белая полупрозрачная тень + тёмный текст.

🎭 CSS-маски
Новые утилиты mask-* для линейных, радиальных и конических градиентов.
Пример: mask-t-from-50% — плавное затемнение сверху.
Можно комбинировать несколько масок.

🧵 Новый контроль переноса
Появились:
- wrap-normal
- wrap-break-word
- wrap-anywhere

Особенно полезно в flex и grid, где раньше длинные строки могли ломать вёрстку.

🌈 Цветной drop-shadow
Теперь drop-shadow можно раскрашивать:
drop-shadow-xl drop-shadow-indigo-500/50
Работает как фильтр, создаёт мягкое цветное свечение.

📱 Указатели: coarse / fine
Появились префиксы pointer-coarse, pointer-fine и any-pointer-*.
Полезно для адаптации интерфейса под тач или мышку:

<button class="px-3 py-1 pointer-coarse:px-5 pointer-coarse:py-3">Кнопка</button>


🧮 Выравнивание по последней строке
items-baseline-last и self-baseline-last — выравнивают по последней строке текста.
Актуально для карточек, чатов и типографики.

🛟 Безопасное центрирование
justify-center-safe, items-center-safe — если контент не влезает, он смещается влево, а не обрезается.

💻 Поддержка старых браузеров
Работает корректно на Safari 15 и старом Firefox:
- fallback для OKLCH
- отключение @property, если не поддерживается
- корректная деградация теней и градиентов

🧾 @source inline — для safelist в CSS
Можно подключать классы прямо в CSS:
@source inline("text-red-500 lg:bg-blue-100");


🔄 Другие полезности
- noscript: — для стилей без JS
- user-valid: и user-invalid: — UX-дружественная валидация
- details-content: — для <details>
- inverted-colors: — для системной инверсии

🧩 Вывод
Tailwind 4.1 — не про революцию, а про удобные детали, которые приятно использовать.
Обновляться можно без страха — всё совместимо

CutCode

BY Новости от CutCode




Share with your friend now:
tg-me.com/laravel_cutcode/722

View MORE
Open in Telegram


Новости от CutCode Telegram | DID YOU KNOW?

Date: |

Pinterest (PINS) Stock Sinks As Market Gains

Pinterest (PINS) closed at $71.75 in the latest trading session, marking a -0.18% move from the prior day. This change lagged the S&P 500's daily gain of 0.1%. Meanwhile, the Dow gained 0.9%, and the Nasdaq, a tech-heavy index, lost 0.59%. Heading into today, shares of the digital pinboard and shopping tool company had lost 17.41% over the past month, lagging the Computer and Technology sector's loss of 5.38% and the S&P 500's gain of 0.71% in that time. Investors will be hoping for strength from PINS as it approaches its next earnings release. The company is expected to report EPS of $0.07, up 170% from the prior-year quarter. Our most recent consensus estimate is calling for quarterly revenue of $467.87 million, up 72.05% from the year-ago period.

Traders also expressed uncertainty about the situation with China Evergrande, as the indebted property company has not provided clarification about a key interest payment.In economic news, the Commerce Department reported an unexpected increase in U.S. new home sales in August.Crude oil prices climbed Friday and front-month WTI oil futures contracts saw gains for a fifth straight week amid tighter supplies. West Texas Intermediate Crude oil futures for November rose $0.68 or 0.9 percent at 73.98 a barrel. WTI Crude futures gained 2.8 percent for the week.

Новости от CutCode from ms


Telegram Новости от CutCode
FROM USA